<template>
  <div class="home">
    <Login></Login>
    <Register></Register>
    <NavBar :class="{'home-nav':scrollTop < 430}"></NavBar>
    <Carousel></Carousel>
    <section class="w1400 mt50 clearfix">
      <section class="important">
        <h2 class="border-title">高校招生直播专栏-武汉大学</h2>
        <div class="card-container">
          <VideoCard
            @click.native="goWuhan()"
            :item="wuhan"
          ></VideoCard>
        </div>
      </section>
      <section class="past-live">
        <div style="display: flex;justify-content: space-between;align-items: flex-end;">
          <h2 class="border-title">往期直播</h2>
          <div>
            <span class="his" style="color: #1F2329; cursor: pointer;" @click="goLiveHistory">更多往期直播</span>
            <span style="margin:0 20px">|</span>
            <span class="his" style="color: #1F2329; cursor: pointer;"  @click="goLiveTable">直播排期表></span>
          </div>
        </div>
        <div class="card-container">
          <VideoCard
            @click.native="goLivePlay(pastLive)"
            @mouseenter.native="hover(pastLive)"
            @mouseleave.native="hoverLeave(pastLive)"
            v-for="(pastLive, index) in pastLiveList" :key="'pastLive'+index"
            :item="pastLive"
            :showVideo="true"
          ></VideoCard>
        </div>
      </section>
    </section>
    <AdvertBar></AdvertBar>
    <section class="school-publicity w1400 clearfix mt50">
      <h2 class="border-title">学校宣传片</h2>
      <div class="card-container">
        <VideoCard
          @click.native="goVideoPlay(publicity.id, publicity.title, 'trailer')"
          @mouseenter.native="hover(publicity)"
          @mouseleave.native="hoverLeave(publicity)"
          v-for="(publicity, index) in publicityList" :key="'publicity'+index"
          :item="publicity"
          :showEye="true"
          title-class="clamp2-ellipsis"
        ></VideoCard>
      </div>
    </section>
    <section class="major-intro w1400 clearfix mt50">
      <h2 class="border-title">专业介绍片</h2>
      <div class="card-container">
        <VideoCard
          @click.native="goVideoPlay(intro.id, intro.title, 'major')"
          @mouseenter.native="hover(intro)"
          @mouseleave.native="hoverLeave(intro)"
          v-for="(intro, index) in introList" :key="'intro'+index"
          :item="intro" :showEye="true"
          title-class="clamp2-ellipsis"
        ></VideoCard>
      </div>
    </section>
    <section class="w1400 mt50 clearfix">
      <h2 class="border-title">中国高校信息</h2>
      <div class="university-container">
        <div class="university-box" @click="goUniversityInfo(17)">
          <div class="university-title">一流大学</div>
          <div class="university-box-content clearfix">
            <img src="http://zyfiles.ubzyw.com/res/1509005171145.png" alt="北京大学">
            <img src="http://zyfiles.ubzyw.com/res/1509698418664.png" alt="清华大学">
            <img src="http://zyfiles.ubzyw.com/res/1509971847353.jpg" alt="复旦大学">
            <img src="http://zyfiles.ubzyw.com/res/1539140978634.jpg" alt="中国人民大学">
            <img src="http://zyfiles.ubzyw.com/res/1509705617369.png" alt="浙江大学">
          </div>
        </div>
        <div class="university-box" @click="goUniversityInfo(205)">
          <div class="university-title">一流学科大学</div>
          <div class="university-box-content clearfix">
            <img src="http://zyfiles.ubzyw.com/res/1542847343038.png" alt="中国科学院大学">
            <img src="http://zyfiles.ubzyw.com/res/1540390540656.jpg" alt="华中师范大学">
            <img src="http://zyfiles.ubzyw.com/res/1538879834593.jpg" alt="武汉理工大学">
            <img src="http://zyfiles.ubzyw.com/res/1539138375341.jpg" alt="北京科技大学">
            <img src="http://zyfiles.ubzyw.com/res/1538893645737.png" alt="河海大学">
          </div>
        </div>
        <div class="university-box" @click="goUniversityInfo(152)">
          <div class="university-title">国家重点</div>
          <div class="university-box-content clearfix">
            <img src="http://zyfiles.ubzyw.com/res/1540044857217.jpg" alt="中山大学">
            <img src="http://zyfiles.ubzyw.com/res/1538879894090.png" alt="西南大学">
            <img src="http://zyfiles.ubzyw.com/res/1525704543102.jpg" alt="华中农业大学">
            <img src="http://zyfiles.ubzyw.com/res/1540390875866.png" alt="南京航空航天大学">
            <img src="http://zyfiles.ubzyw.com/res/1540390772426.png" alt="中国石油大学(华东)">
          </div>
        </div>
        <div class="university-box" @click="goUniversityInfo(-1)">
          <div class="university-title">普通本科</div>
          <div class="university-box-content clearfix">
            <img src="http://zyfiles.ubzyw.com/res/1510649409013.jpg" alt="深圳大学">
            <img src="http://zyfiles.ubzyw.com/res/1540389948802.jpg" alt="首都医科大学">
            <img src="http://zyfiles.ubzyw.com/res/1540390327721.jpg" alt="东北财经大学">
            <img src="http://zyfiles.ubzyw.com/res/1510659264119.jpg" alt="广东外语外贸大学">
            <img src="http://zyfiles.ubzyw.com/res/1539141076365.png" alt="南京医科大学">
          </div>
        </div>
      </div>
    </section>
    <FootBar></FootBar>
  </div>
</template>

<script>
  import Carousel from './comp/Carousel'
  import NavBar from '../../layout/NavBar'
  import VideoCard from './comp/VideoCard'
  import FootBar from '../../layout/FootBar'
  import AdvertBar from '../../components/AdvertBar'
  import Login from '../../layout/Login'
  import Register from '../../layout/Register'
  import { simplifyArray } from '../../utils/array.util'
  import { checkLogin } from '../../utils/checkLogin'

  export default {
    name: 'Home',
    components: {
      Register,
      Carousel,
      NavBar,
      VideoCard,
      AdvertBar,
      FootBar,
      Login,
    },
    data () {
      return {
        important: {}, // 高考避雷针
        pastLiveList: [], // 往期直播
        publicityList: [], // 学校宣传片
        introList: [], // 专业介绍片
        scrollTop: 0,
        wuhan:{}
      }
    },
    mounted () {
      this.getImportant()
      this.getPastLiveList()
      this.getPublicityList()
      this.getIntroList()
      window.addEventListener('scroll', this.onScroll)
       this.wuhan = {
            imgSrc: 'http://zyfiles.ubzyw.com/video/%E6%AD%A6%E6%B1%89%E5%A4%A7%E5%AD%A6logo.png',
            info: ' 2020年武汉大学招生直播专栏，29个院系的招生政策详细解读，欢迎观看！ ',
           title:' 2020年武汉大学招生直播专栏 '
          }
    },
    methods: {
      onScroll () {
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      },
      goUniversityInfo (propertyId) {
        this.$router.push({
          path: '/universityInfo',
          query: { propertyId }
        })
      },
      // 直播跳转检查直播码
      handleVideoClick (id) {
        return this.$http.get('/liveVideoController/clickVideoByUser', { id })
      },
      // 跳转直播
      goLivePlay ({ id, title }) {
        this.handleVideoClick(id).then(value => {
          if (value.status === 501) {
            return
          }
          if (value.status === 2004 || value.status === 2005) {
            this.$router.push({
              path: '/liveDetail',
              query: { id, title }
            })
            return
          }
          if (value.state === 2) {
            window.open(`#/videoPlay?title=${title}&videoUrl=${value.backUrl}`)
          } else {
            window.open(value.url)
          }
        })
      },
      // 跳转直播排期表
      goLiveTable () {
        this.$router.push('/liveTable')
      },
      //更多往期直播
      goLiveHistory(){
        if (checkLogin()) {
          this.$router.push('/liveHistory')
        } else {
          this.$store.commit('ToggleLoginOpen', true)
        }
      },
      hover (item) {
        this.$set(item, 'show', true)
      },
      hoverLeave (item) {
        this.$set(item, 'show', false)
      },
      // 跳转高考避雷针详情
      goImportantDetail (id) {
        this.$http.get('/informationController/clickDetailById', { id })
          .then(value => {
            window.open(value)
          })
      },
      goWuhan (id) {
        this.$router.push('/wuhanSchool')
      },
      goVideoPlay (id, title, type) {
        if (checkLogin()) {
          window.open(`#/videoPlay?id=${id}&title=${title}&type=${type}`)
        } else {
          this.$store.commit('ToggleLoginOpen', true)
        }
      },
      getIntroList () {
        this.$http.get('/liveVideoController/getMajorVideo').then(value => {
          // TrailerOrMajorVideoVO {
          //   id (integer, optional),
          //   img (string, optional): 关键图片 ,
          //   title (string, optional): 标题
          // }
          this.introList = simplifyArray(value, (v) => {
            const { img, ...other } = v
            return {
              imgSrc: img,
              ...other
            }
          })
        })
      },
      getPublicityList () {
        this.$http.get('/liveVideoController/getTrailerVideo').then(value => {
          // TrailerOrMajorVideoVO {
          //   id (integer, optional),
          //   img (string, optional): 关键图片 ,
          //   title (string, optional): 标题
          // }
          this.publicityList = simplifyArray(value, (v) => {
            const { img, ...other } = v
            return {
              imgSrc: img,
              ...other
            }
          })
        })
      },
      // 获取往期直播
      getPastLiveList () {
        this.$http.get('/liveVideoController/getPassTimeVideo').then(value => {
          // VideoVO {
          //   endTime (string, optional): 结束时间 ,
          //   explainer (string, optional): 主讲人 ,
          //   id (integer, optional): 主键 ,
          //   introduce (string, optional): 直播介绍 ,
          //   liveNo (string, optional): 直播号 ,
          //   logo (string, optional): 图片 ,
          //   loopImg (string, optional): 轮播图 ,
          //   mdTime (string, optional): 日期 月日 ,
          //   openTime (string, optional): 日期 全日期格式 ,
          //   schoolId (string, optional): 学校主键 ,
          //   schoolName (string, optional): 学校名称 ,
          //   startTime (string, optional): 开始时间 ,
          //   title (string, optional): 直播标题
          // }
          this.pastLiveList = simplifyArray(value, (v) => {
            const { logo, ...other } = v
            return {
              imgSrc: logo,
              ...other
            }
          })
        })
      },
      // 获取最新一条的高考避雷针记录university-box
      getImportant () {
        this.$http.get('/informationController/getNewOne').then(value => {
          // TabInformationEntity {
          //   content (string, optional): 简介 ,
          //   createTime (string, optional),
          //   logo (string, optional): 图片 ,
          //   releaseTime (string, optional): 发布时间 ,
          //   remark (string, optional): 备注 ,
          //   status (integer, optional): 状态 ,
          //   title (string, optional): 标题 ,
          //   top (integer, optional): 是否置顶 ,
          //   updateTime (string, optional),
          //   url (string, optional): 连接
          // }
          const { logo, content, ...other } = value
          this.important = {
            imgSrc: logo,
            info: content,
            ...other
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .home {
    .home-nav {
      background: rgba(0, 0, 0, .3);
      box-shadow: none;

      .nav-title {
        p {
          color: #fff;
        }
      }

      .nav-list {
        li {
          color: #fff;
        }
      }

      .login-register {
        color: #fff;
      }

      .user-box {
        color: #fff;
      }
    }

    .important {
      .card-box {
        width: 452px;
      }

      .card-img {
        height: 339px;
      }

      .card-text {
        height: 105px;
      }

      .title {
        padding-top: 20px;
        padding-bottom: 16px;
      }
    }
    .his:hover{
      color:#FF6B51
    }
    .past-live {
      .card-box {
        width: 296px;
        margin-bottom: 16px;
      }

      .card-img {
        height: 166px;
      }

      .card-text {
        height: 48px;
      }

      .title {
        padding-top: 16px;
      }
    }

    .school-publicity, .major-intro {
      .card-box {
        width: 216px;
        margin-bottom: 16px;
      }

      .card-img {
        height: 120px;
      }

      .card-text {
        height: 68px;
      }

      .title {
        padding-top: 8px;
      }
    }
  }
</style>

<style scoped lang="less">
  .home {
    .border-title {
      font-size: 30px;
      color: #1F2329;
    }

    .card-container {
      margin-left: -20px;
      margin-top: 20px;
    }

    .important {
      float: left;
      width: 452px;
    }

    .past-live {
      float: right;
      width: 928px;
      margin-left: 20px;
    }

    .university-container {
      margin-left: -20px;
      margin-top: 20px;
    }

    .university-box {
      cursor: pointer;
      float: left;
      color: #1F2329;
      width: 335px;
      height: 104px;
      margin-left: 20px;
      box-sizing: border-box;
      border: 1px solid #EFF0F1;
      padding: 20px 36px;
      &:hover{
        background: #F5F6F7;
      }
      .university-box-content {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 12px;
      }

      img {
        float: left;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
  }
</style>
